<template>
  <vxe-modal
    ref="deptModal"
    v-model="visible"
    :resize="true"
    width="1024"
    height="600"
    :title="pageAction == 'create' ? '添加部门' : '编辑部门'"
    :show-zoom="true"
    :destroy-on-close="true"
    :show-footer="true"
    @close="cancel"
  >
    <el-form
      ref="form1"
      label-width="120px"
      :model="models"
      label-suffix=":"
      style="margin-top: 16px"
      :rules="rules"
    >
      <div style="float: right; z-index: 2; position: relative; padding: 3px">
        <el-button
          v-if="'formTable' == tabActive"
          type="primary"
          icon="el-icon-plus"
          @click="addTable()"
          >添加管理员</el-button
        >
      </div>
      <el-tabs v-model="tabActive" type="border-card">
        <el-tab-pane label="基本信息" name="form">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="上级部门">
                <treeselect
                  v-model="models.model.parentId"
                  :options="deptOptions"
                  :normalizer="normalizer"
                  :show-count="true"
                  placeholder="选择上级部门"
                  noChildrenText="没有了"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="部门名称" prop="model.name">
                <el-input v-model="models.model.name" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="部门编码" prop="model.code">
                <el-input v-model="models.model.code" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="负责人">
                <el-input v-model="models.model.manager" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="排序号">
                <el-input v-model="models.model.sort" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否启用">
                <el-switch v-model="models.model.isEnabled" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item :gutter="20" label="描述">
              <el-input v-model="models.model.description" type="textarea" />
            </el-form-item>
          </el-row>
        </el-tab-pane>

        <el-tab-pane
          label="添加管理员"
          name="formTable"
          v-show="!defaults.isEnabled"
        >
          <el-table :data="models.formTables" border style="width: 100%">
            <el-table-column fixed type="index" width="50" />
            <el-table-column fixed prop="loginId" label="登录账号" />
            <el-table-column fixed prop="userName" label="用户名称" />
            <el-table-column fixed prop="tag" label="允许编辑管理员">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.tag" />
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button type="text" @click="removeTable(scope.row)"
                  >移除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-form>

    <select-table
      v-model="selectTableModalVisible"
      :multiple="true"
      @success="afterSelect"
      @cancel="selectTableModalVisible = false"
    />

    <template #footer>
      <el-row>
        <el-col :span="24" style="text-align: right; margin-top: 16px">
          <el-button type="primary" @click="save">确定</el-button>
          <el-button type="info" @click="cancel">关闭</el-button>
        </el-col>
      </el-row>
    </template>
  </vxe-modal>
</template>

<script>
import _ from "lodash";
import request from "@/utils/request";
import SelectTable from "./selectTable";
import Controller from "@/libs/framework/controller";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default class Instance extends Controller {
  onBeforeInit() {
    this.urls = {
      save: "/admin/sysDepartment/save",
    };
  }

  onBeforeSave(postModel) {
    let next = false;
    this.vm.$refs["form1"].validate((valid) => {
      if (valid) {
        if (postModel.pageAction === "edit" && !postModel.model.parentId) {
          postModel.model.parentId = "";
        }
        next = true;
      }
    });
    return next;
  }

  onAfterSave(isSuccess, result) {
    if (isSuccess) {
      this.vm.$emit("success");
    }
  }

  mixin() {
    return {
      name: "department-form",
      components: {
        SelectTable,
        Treeselect,
      },
      props: {
        params: Object,
        value: Boolean,
      },
      data() {
        return {
          visible: false,
          selectTableModalVisible: false,
          models: {
            model: {},
            formTables: [],
          },
          defaults: {},
          tabActive: "form",
          deptOptions: [],
          rules: {
            "model.name": [
              {
                required: true,
                message: "请输入部门名称",
                trigger: "blur",
              },
            ],
            "model.code": [
              {
                required: true,
                message: "请输入部门编号",
                trigger: "blur",
              },
            ],
          },
        };
      },
      methods: {
        afterSelect(result) {
          if (result && result.length > 0) {
            result.forEach((item, idx) => {
              if (
                _.findIndex(this.models.formTables, { userId: item.userId }) ===
                -1
              ) {
                this.models.formTables.push(
                  _.extend({}, this.defaults.formTable, {
                    userName: item.userName,
                    loginId: item.loginId,
                    userId: item.userId,
                    departmentId: this.models.model.departmentId,
                  })
                );
              }
            });
          }
          this.selectTableModalVisible = false;
        },
        addTable() {
          this.selectTableModalVisible = true;
        },
        removeTable(table) {
          this.models.formTables.remove(table);
        },
        handleTabClick(tab, event) {
          this.tabActive = tab.name;
        },
        fetchData() {
          const url = "/admin/sysDepartment/getEntity";
          request({
            url: url,
            method: "post",
            data: this.params || {},
          }).then((vm) => {
            const { controlData, models, defaults } = vm;
            this.models = _.extend({}, this.models, models);
            this.defaults = _.extend({}, this.defaults, defaults);
            this.deptOptions = _.extend(
              {},
              this.defaults,
              controlData
            ).deptOptions;

            if (this.params.pageAction === "create") {
              this.models.model.parentId = this.params.parentId;
              this.models.model.rootId = this.params.rootId;
              this.pageAction = "create";
            } else {
              this.pageAction = this.params.pageAction;
              this.models.departmentId = this.models.model.departmentId;
            }
          });
        },
        cancel() {
          this.$emit("cancel");
        },
        normalizer(node) {
          return {
            id: node.id,
            label: node.text,
            children: node.children,
          };
        },
      },
      watch: {
        value(visible) {
          this.visible = visible;
          if (visible) {
            this.fetchData();
          }
        },
      },
      created() {},
    };
  }
}
</script>

<style></style>
